<template>
  <div>
    <h2>二维码生成器</h2>
    <div class="container qr-code-generator">
      
      <input
        v-model="inputValue"
        type="text"
        placeholder="请输入一串数字或URL地址"
        @keyup.enter="generateQRCode"
      />
      <button @click="generateQRCode" class="execute-button">生成二维码</button>
      <div v-if="qrCodeDataUrl">
        <h3>生成的二维码：</h3>
        <img :src="qrCodeDataUrl" alt="二维码" />
      </div>
    </div>
  </div>

  </template>
  
  <script lang="ts">
  import { defineComponent, ref } from 'vue';
  import QRCode from 'qrcode';
  
  export default defineComponent({
    name: 'QRCodeGenerator',
    setup() {
      const inputValue = ref<string>('');
      const qrCodeDataUrl = ref<string | null>(null);
  
      const generateQRCode = async () => {
        try {
          const dataUrl = await QRCode.toDataURL(inputValue.value);
          qrCodeDataUrl.value = dataUrl;
        } catch (error) {
          console.error('生成二维码时出错:', error);
          qrCodeDataUrl.value = null;
        }
      };
  
      return {
        inputValue,
        qrCodeDataUrl,
        generateQRCode,
      };
    },
  });
  </script>
  
  <style scoped lang="scss">
  @use "../assets/common.scss";
  @use "../assets/qrcode.scss";
  </style>